<@main.page title="增删改示例">
<div class="row">
	<div class="col-md-12">
	  <div class="portlet box purple">
	  	<div class="portlet-title">
	  		<div class="caption">
	  			<i class="fa fa-reorder"></i>
	  			查询内容  
	  		</div> 
	  		<div class="tools">
					<a class="collapse" href="javascript:;" ></a>
				</div>
	  		<div class="actions">
	  			<a class="btn" href="#" > 
	  				<i class="fa fa-search"></i> 查询
	  			</a>
	  			<a class="btn" href="#" >
	  				<i class="fa fa-file-text"></i> 导出
	  			</a>
	  			<a class="btn" href="#" >
	  				<i class="fa fa-print"></i> 打印
	  			</a>
	  		</div>
	  	</div>
	  	
	  	<div class="portlet-body">
	  	  <div class="row">
	  		<form class="form-horizontal">
	  			<div class="col-md-3">
	  				<div class="form-group">
	  					<label class="control-label col-md-4">姓名</label>
	  					<div class="col-md-8">
	  						<input name="Name" type="text" class="form-control" />
	  					</div>
	  				</div>
	  			</div>
	  			<div class="col-md-3">
	  				<div class="form-group">
	  					<label class="control-label col-md-4">登录名</label>
	  					<div class="col-md-8">
	  						<input name="LoginName" type="text" class="form-control" />
	  					</div>
	  				</div>
	  			</div>
	  			<div class="col-md-3">
	  				<div class="form-group">
	  					<label class="control-label col-md-4">部门名称</label>
	  					<div class="col-md-8">
	  						<input name="DeptName" type="text" class="form-control" />
	  					</div>
	  				</div>
	  			</div>
	  			<div class="col-md-3">
	  				<div class="form-group">
	  					<label class="control-label col-md-4">手机号</label>
	  					<div class="col-md-8">
	  						<input name="Mobil" type="text" class="form-control" />
	  					</div>
	  				</div>
	  			</div>
	  		</form>	
	  		</div>
	  	</div>
	  </div>
	</div>
	
	<div class="col-md-12">
		<div class="portlet box  purple">
			<div class="portlet-title">
				<div class="caption">
					<i class="fa fa-coffee"></i>
					人员列表
				</div>
				<div class="tools">
					<a class="collapse" href="javascript:;" ></a>
				</div>
				<div class="actions">
					<a class="btn blue"><i class="fa fa-plus"></i> 新建</a>
					<a class="btn blue"><i class="fa fa-edit"></i> 修改</a>
					<a class="btn blue"><i class="fa fa-table"></i> 查看</a>
					<a class="btn blue"><i class="fa fa-times"></i> 删除</a>
				</div>
				
			</div>
			<div class="portlet-body">
				<div class="table-scrollable">
							<table class="table table-striped table-bordered table-hover table-full-width dataTable">
							  <thead>
							 	 <tr role="row">
							 	 	<th class="sorting" role="columnheader" aria-controls="sample_2" style="width:194px;" >Rendering engine</th>
							 	 	<th class="sorting_asc" role="columnheader" aria-controls="sample_2" style="width: 236px;" aria-sort="ascending" >Browser</th>
							 	 	<th class="hidden-xs sorting" role="columnheader" aria-controls="sample_2" style="width: 214px;" >Platform(s)</th>
							 	 	<th class="hidden-xs sorting" role="columnheader" aria-controls="sample_2" style="width: 166px;" >Engine version</th>
							 	 	<th class="hidden-xs sorting" role="columnheader" aria-controls="sample_2" style="width: 116px;">CSS grade</th>
							 	 	<th class="hidden-xs" role="columnheader" aria-controls="sample_2" style="width: 116px;text-align:center">操作</th>
							 	 </tr>
							  </thead>
							  <tbody>
							  	   <tr class="odd">
										<td class=" ">Trident</td>
										<td class="  sorting_1">AOL browser (AOL desktop)</td>
										<td class=" ">Win XP</td>
										<td class=" ">6</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center;font-size:14px;">
											 <a class="text-primary" href="#"><i class="fa fa-edit"></i></a>&nbsp;
											 <a class="text-success" href="#"><i class="fa fa-table"></i></a>&nbsp;
											 <a class="text-danger" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="even">
										<td class=" ">Gecko</td>
										<td class="  sorting_1">Camino 1.0</td>
										<td class=" ">OSX.2+</td>
										<td class=" ">1.8</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="odd">
										<td class=" ">Trident</td>
										<td class="  sorting_1">AOL browser (AOL desktop)</td>
										<td class=" ">Win XP</td>
										<td class=" ">6</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="even">
										<td class=" ">Gecko</td>
										<td class="  sorting_1">Camino 1.0</td>
										<td class=" ">OSX.2+</td>
										<td class=" ">1.8</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="odd">
										<td class=" ">Trident</td>
										<td class="  sorting_1">AOL browser (AOL desktop)</td>
										<td class=" ">Win XP</td>
										<td class=" ">6</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="even">
										<td class=" ">Gecko</td>
										<td class="  sorting_1">Camino 1.0</td>
										<td class=" ">OSX.2+</td>
										<td class=" ">1.8</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="odd">
										<td class=" ">Trident</td>
										<td class="  sorting_1">AOL browser (AOL desktop)</td>
										<td class=" ">Win XP</td>
										<td class=" ">6</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="even">
										<td class=" ">Gecko</td>
										<td class="  sorting_1">Camino 1.0</td>
										<td class=" ">OSX.2+</td>
										<td class=" ">1.8</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="odd">
										<td class=" ">Trident</td>
										<td class="  sorting_1">AOL browser (AOL desktop)</td>
										<td class=" ">Win XP</td>
										<td class=" ">6</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="even">
										<td class=" ">Gecko</td>
										<td class="  sorting_1">Camino 1.0</td>
										<td class=" ">OSX.2+</td>
										<td class=" ">1.8</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="odd">
										<td class=" ">Trident</td>
										<td class="  sorting_1">AOL browser (AOL desktop)</td>
										<td class=" ">Win XP</td>
										<td class=" ">6</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="even">
										<td class=" ">Gecko</td>
										<td class="  sorting_1">Camino 1.0</td>
										<td class=" ">OSX.2+</td>
										<td class=" ">1.8</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="odd">
										<td class=" ">Trident</td>
										<td class="  sorting_1">AOL browser (AOL desktop)</td>
										<td class=" ">Win XP</td>
										<td class=" ">6</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="even">
										<td class=" ">Gecko</td>
										<td class="  sorting_1">Camino 1.0</td>
										<td class=" ">OSX.2+</td>
										<td class=" ">1.8</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="odd">
										<td class=" ">Trident</td>
										<td class="  sorting_1">AOL browser (AOL desktop)</td>
										<td class=" ">Win XP</td>
										<td class=" ">6</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
									<tr class="even">
										<td class=" ">Gecko</td>
										<td class="  sorting_1">Camino 1.0</td>
										<td class=" ">OSX.2+</td>
										<td class=" ">1.8</td>
										<td class=" ">A</td>
										<td class="" style="text-align:center">
										 <a class="btn blue" href="#"><i class="fa fa-edit"></i></a>
										 <a class="btn green" href="#"><i class="fa fa-table"></i></a>
										 <a class="btn red" href="#"><i class="fa fa-times"></i></a>
										</td>
									</tr>
							  </tbody>
							</table>
				</div>
				
				<div class="row">
					<div class="col-md-5">
						<div class="dataTables_info" >
						   第 <span class="text-primary">1</span> 页 &nbsp; &nbsp; 共 <span class="text-primary">10</span> 页
						</div>
					</div>
					<div class="col-md-7">
						<div class="dataTables_paginate paging_bootstrap">
							<ul class="pagination" style="visibility: visible;">
								<li class="prev disabled"><a title="Previous" href="#"><i class="fa fa-angle-left"></i></a></li>
								<li class="active"><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li>
								<li class="next"><a title="Next" href="#"><i class="fa fa-angle-right"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</div>
</@main.page>
